<template>
  <div class="order-right order container">
    <div class="order-content">
      <div class="title">
        <h3>我的订单</h3>
      </div>
      <div class="chosetype">
        <table>
          <thead>
            <tr>
              <th width="32%">商品</th>
              <!-- <th width="20%">订单详情</th> -->
              <th width="22%">收货地址</th>
              <th width="15%">手机号</th>
              <th width="10%">收货人</th>
              <th width="10%">总金额</th>
              <th width="10%">状态</th>
              <!-- <th width="20%">操作</th> -->
            </tr>
          </thead>
        </table>
      </div>
      <div class="orders">
        <table class="order-item" v-for="item in orderList" :key="item.orderId">
          <thead>
            <tr>
              <th colspan="6">
                <span class="ordertitle"
                  >{{ item.createTime | dateFormat }} 订单编号：{{ item.orderId }}
                  <el-button
                    v-show="item.status == '已完成'"
                    @click="deleteHandle(item.orderId)"
                    type="danger"
                    target="_blank"
                    size="mini"
                    >删除</el-button
                  >
                  <el-button
                    v-show="item.status == '未完成'"
                    @click="updateHandle(item)"
                    type="success"
                    target="_blank"
                    size="mini"
                    >继续支付</el-button
                  >
                  <el-button
                    v-show="item.status == '未完成'"
                    @click="deleteOrder(item)"
                    type="success"
                    target="_blank"
                    size="mini"
                    >取消订单</el-button
                  >
                </span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(detail, index) in item.orderItemReturns" :key="index">
              <td width="29%">
                <div class="typographic">
                  <img :src="detail.skuImg" style="width: 80px; height: 80px" />
                  <div @click="goDetails(detail.proid)" class="block-text">
                    {{ detail.skuName }}
                  </div>
                  <span>{{ detail.count }}x{{ detail.price }}</span>
                  <div
                    @click="commentDialog(detail)"
                    class="sentcomment"
                    v-show="item.logisticsStatus === '已发货'"
                  >
                    发表评价
                  </div>
                </div>
              </td>
              <td
                :rowspan="item.orderItemReturns.length"
                v-if="index == 0"
                width="20%"
                class="center"
              >
                {{ item.userAddressEntity.detailAddress }}
              </td>
              <td
                :rowspan="item.orderItemReturns.length"
                v-if="index == 0"
                width="12%"
                class="center"
              >
                {{ item.userAddressEntity.phone }}
              </td>
              <td
                :rowspan="item.orderItemReturns.length"
                v-if="index == 0"
                width="10%"
                class="center"
              >
                {{ item.userAddressEntity.name }}
              </td>
              <td
                :rowspan="item.orderItemReturns.length"
                v-if="index == 0"
                width="10%"
                class="center"
              >
                <ul class="unstyled">
                  <li>¥{{ item.price }}.00</li>
                </ul>
              </td>
              <td
                :rowspan="item.orderItemReturns.length"
                v-if="index == 0"
                width="10%"
                class="center"
              >
                <p class="btn">{{ item.logisticsStatus }}</p>
              </td>
              <!-- <td
                :rowspan="item.orderItemReturns.length"
                v-if="index == 0"
                width="18%"
                class="center"
              >
                <ul class="unstyled">
                  <li>
                    <el-button
                      type="success"
                      target="_blank"
                      v-show="item.status === '未完成'"
                      >去付款</el-button
                    >
                  </li>
                </ul>
              </td> -->
            </tr>
          </tbody>
        </table>
      </div>
      <div class="choose-order"></div>
    </div>
    <!-- 支付弹框 -->
    <el-dialog
      title="请用支付宝扫码支付"
      :visible.sync="centerDialogVisible"
      width="25%"
      center
    >
      <div>
        <img style="height: 300px; width: 300px" src="../assets/ewm.jpg" alt="" />
      </div>
      <span slot="footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getUp">我已支付</el-button>
      </span>
    </el-dialog>
    <!-- 发表评价弹框 -->
    <el-dialog title="请评价商品" :visible.sync="commentDialogVisible" width="50%" center>
      <el-form :model="comment" label-width="100px" class="demo-ruleForm">
        <el-form-item label="等级" prop="description">
          <el-radio-group v-model="comment.star" size="medium">
            <el-radio-button label="1">1<i class="el-icon-star-on"></i></el-radio-button>
            <el-radio-button label="2">2<i class="el-icon-star-on"></i></el-radio-button>
            <el-radio-button label="3">3<i class="el-icon-star-on"></i></el-radio-button>
            <el-radio-button label="4">4<i class="el-icon-star-on"></i></el-radio-button>
            <el-radio-button label="5">5<i class="el-icon-star-on"></i></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="comment.description"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="commentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updataComment">发 表</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cookie from "js-cookie";
export default {
  data() {
    return {
      orderList: [],
      centerDialogVisible: false,
      // 修改订单状态支付完成
      updateOrder: {},
      // 评价的内容
      comment: {
        star: 5,
        description: "",
      },
      commentDialogVisible: false,
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    async getOrderList() {
      const { data: res } = await this.$http.get("/dqxmall/order/list");
      console.log("订单列表", res);
      if (res.code === 0) {
        this.orderList = res.page.list;
      }
    },
    //  删除订单
    async deleteHandle(id) {
      const { data: res } = await this.$http.post("/dqxmall/order/delete", [id]);
      if (res.code === 0) {
        this.$message.success("订单删除成功");
        this.getOrderList();
      } else {
        this.$message.error("订单删除失败");
      }
    },
    goDetails(id) {
      this.$router.push({ path: "/goods/info", query: { id } });
    },
    // 支付框显示
    updateHandle(data) {
      this.updateOrder = data;
      this.centerDialogVisible = true;
    },
    // 支付完成
    async getUp() {
      const { data: res } = await this.$http.post("/dqxmall/order/update", {
        id: this.updateOrder.orderId,
        status: "已完成",
      });
      if (res.code !== 0) {
        return this.$message.error("支付失败");
      }
      this.getOrderList();
      this.$message.success("订单支付成功");
      this.centerDialogVisible = false;
    },
    // 取消订单
    async deleteOrder(data) {
      console.log("取消订单", data);
      const { data: res } = await this.$http.post("/dqxmall/order/delete", [
        data.orderId,
      ]);
      if (res.code !== 0) return this.$message.error("订单取消失败");
      // data.orderItemReturns.forEach(async (item) => {
      //   const { data: res1 } = await this.$http.post("/dqxmall/prosysskuinfo/update", {
      //     skuId: item.skuid,
      //     stockCount: item.stockCount + item.count,
      //   });
      //   if (res1.code !== 0) return;
      // });
      this.$message.success("订单取消成功");
      this.getOrderList();
    },
    // 评价弹框显示
    commentDialog(data) {
      console.log(data);
      // this.comment = data;
      (this.comment.skuId = data.skuid),
        (this.comment.proId = data.proid),
        (this.comment.memberId = JSON.parse(cookie.get("userInfo")).id),
        (this.comment.parentId = 0),
        (this.comment.commentType = 0),
        (this.comment.description = ""),
        (this.comment.resources = ""),
        (this.comment.likesCount = 0),
        (this.comment.createTime = new Date()),
        (this.comment.replyCount = 0),
        (this.comment.star = 5);
      console.log("this.comment", this.comment);
      this.commentDialogVisible = true;
    },
    // 发表评价
    async updataComment() {
      const { data: res } = await this.$http.post(
        `/dqxmall/prosysprocomment/save`,
        this.comment
      );
      console.log(res);
      if (res.code !== 0) {
        this.$message.error("评价失败");
      }
      this.$message.success("评价成功");
      this.commentDialogVisible = false;
    },
  },
};
</script>

<style lang="less" scope>
@import "../assets/css/total";
//右边
.order-right {
  width: 1200px;
  // float: right;
  // width: 83.33%;

  //订单部分
  .order-content {
    margin: 0 20px;
    color: #666;

    //标题
    .title {
      margin-bottom: 22px;
      border: 1px solid #ddd;

      h3 {
        padding: 12px 10px;
        font-size: 15px;
        background-color: #f1f1f1;
      }
    }
    .ordertitle {
      font-size: 18px;

      .el-button {
        float: right;
      }
    }
    //表头
    .chosetype {
      margin-bottom: 15px;
      color: #666;

      table {
        border: 1px solid #e6e6e6;
        border-collapse: separate;
        border-radius: 2px;
        width: 100%;
        max-width: 100%;
        border-spacing: 0;

        th {
          padding: 6px 8px;
          color: #666;
          font-weight: 700;
          vertical-align: bottom;
          background-color: #f4f4f4;
          line-height: 18px;
          border-bottom: 1px solid #e6e6e6;
          font-size: 12px;
          text-align: left;
        }
      }
    }

    // 表单内容
    .orders {
      font-size: 12px;

      a {
        &:hover {
          color: #4cb9fc;
        }
      }

      table {
        border: 1px solid #e6e6e6;
        border-collapse: collapse;
        border-radius: 2px;
        width: 100%;
        margin-bottom: 18px;
        max-width: 100%;

        th {
          padding: 6px 8px;
          line-height: 18px;
          text-align: left;
          vertical-align: bottom;
          background-color: #f4f4f4;
          font-size: 12px;
          color: #666;

          .pull-right {
            float: right;
            cursor: pointer;

            img {
              margin-right: 10px;
              vertical-align: middle;
            }
          }
        }

        td {
          font-size: 12px;
          color: #666;
          padding: 6px 8px;
          line-height: 18px;
          text-align: left;
          vertical-align: middle;
          border: 1px solid #e6e6e6;

          &.center {
            text-align: center;
          }

          .typographic {
            img {
              float: left;
              margin-right: 10px;
            }
            .block-text {
              cursor: pointer;
              margin: 20px 10px;
            }
            .sentcomment {
              cursor: pointer;
              color: rgb(255, 115, 0);
            }
            a {
              float: left;
              min-width: 80px;
              max-width: 250px;
              color: #e1251b;

              &.service {
                color: #666;
              }
            }

            span {
              float: left;
              min-width: 80px;
              max-width: 250px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>
